<!-- src/components/RoleSelect.vue -->
<template>
    <div class="role-select">
      <h2>请选择角色</h2>
      <el-select v-model="selectedRole" placeholder="请选择角色" style="width: 200px">
        <el-option label="院长" value="director" />
        <el-option label="医生" value="doctor" />
        <el-option label="护士" value="nurse" />
        <el-option label="前台" value="staff" />
      </el-select>
      <el-button type="primary" @click="confirmRole" style="margin-left: 10px">确认</el-button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  const selectedRole = ref('')
  
  const confirmRole = () => {
    if (!selectedRole.value) return
    localStorage.setItem('userRole', selectedRole.value)
    router.push('/dashboard')
  }
  </script>
  
  <style scoped>
  .role-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
  }
  </style>
  